/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, { useEffect, useRef } from 'react';
import { WebView } from 'react-native-webview';

import SplashScreen from 'react-native-splash-screen';
import {
  Platform,
  BackHandler,
  SafeAreaView,
  StyleSheet,
  StatusBar,
  Linking,
} from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';
// import { requestPermission } from './utils/PermissionModule';

function App(...args: any[]): React.JSX.Element {
  // setTimeout(() => {
  //   SplashScreen.hide();
  // }, 3000);
  const webRef = useRef(null);
  // requestPermission('android.permission.ACCESS_COARSE_LOCATION');

  // const url = 'https://www.amap.com/';
  // const url = 'https://www.baidu.com'
  const url = 'https://192.168.150.250';
  // const url = 'https://www.btosolarman.com/guangYun/';
  let canGoBack = false;

  // useEffect(() => {
  //   // 隐藏
  //   SplashScreen.hide();
  // }, []);
  


  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      () => {
        // 默认情况下，不拦截返回事件，继续传递给其他组件
        if (canGoBack) {
          webRef.current.goBack();
        } else {
          return false;
        }
        return true;
      },
    );

    return () => backHandler.remove();
  }, []);

  const onNavigationStateChange = (navstate: { url: string | string[]; canGoBack: boolean; }) => {
    console.log("🚀 ~ onNavigationStateChange ~ navstate:", navstate)
    if (navstate.url.includes('/index/person')) {
      StatusBar.setBackgroundColor('#ffa70f');
      StatusBar.setBarStyle('light-content');
    } else if (navstate.url.includes('/#/pages')) {
      StatusBar.setBackgroundColor('#f8f8f8');
      StatusBar.setBarStyle('dark-content');
    } else {
      StatusBar.setBackgroundColor('#ffa70f');
      StatusBar.setBarStyle('light-content');
    }
    canGoBack = navstate.canGoBack;
  };

  const onShouldStartLoadWithRequest = (request: { url: any; }) => {
    let url = request.url
    if (url.startsWith('tel:')) {
      Linking.canOpenURL(url).then((enable) => {
        Linking.openURL(url).then(value => {
          console.log('openUrl ', value)
        })
      })
      return false
    }
    return true
  }


  return (
    <SafeAreaView style={styles.container}>
      <StatusBar
        animated={true}
        barStyle="dark-content"
        translucent={false}
        showHideTransition={'fade'}
        networkActivityIndicatorVisible
        backgroundColor={Colors.lighter}
      />
      <WebView
        ref={webRef}
        allowsBackForwardNavigationGestures={true}
        allowsInlineMediaPlayback={true}
        allowsAirPlayForMediaPlayback={true}
        allowsLinkPreview={true}
        allowsProtectedMedia={true}
        geolocationEnabled={true}
        allowFileAccessFromFileURLs={true}
        allowUniversalAccessFromFileURLs={true}
        allowFileAccess={true}
        allowsFullscreenVideo={true}
        scalesPageToFit={true}
        javaScriptEnabled={true} // 启用 JavaScript
        domStorageEnabled={true} // 启用 DOM 存储
        useWebKit={true}
        startInLoadingState={true}
        onNavigationStateChange={onNavigationStateChange}
        onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
        mixedContentMode="always"
        originWhitelist={['*']}
        source={{
          uri: url,
          androidHardwareAccelerationDisabled: true,
          scalesPageToFit: Platform.OS === 'android',
          originWhitelist: ['*'],
        }}
        style={styles.webView}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.lighter,
  },
  webView: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  bar: {
    backgroundColor: Colors.lighter,
  },
});

export default App;
